<!-- 第一部分 -->
<style type="text/css">
    li.noneBold {
        list-style-type: none;
        font-size: 15px;
        font-weight: bold;
        color: #000000
    }

    li.none {
        list-style-type: none;
        /*list-style:url(/mobilemode/images/position2.png) inside}*/
    }

    ul.disc {
        list-style-type: disc;
        font-size: 12px;
        color: #C0C0C0
    }

    span.positionImage {
        background-image: url(/mobilemode/images/position5.png);
        background-repeat: no-repeat;
        padding-left: 20px;
        padding-bottom: 32px;
    }

    div.recordDiv {
        padding-bottom: 32px;
    }
</style>
<div id="record">
<div class="recordDiv" id="record1">
    <ul class="disc">
        <li>上班时间 8:30</li>
        <li class="noneBold ">打卡时间 8:30</li>
        <li class="none"><span class="positionImage"></span><span id="address1"></span></li>
    </ul>
</div>

<div class="recordDiv" id="record2">
    <ul class="disc">
        <li>下班时间 12:00</li>
        <li class="noneBold ">打卡时间 12:00</li>
        <li class="none">打卡地址</li>
    </ul>
</div>

<div class="recordDiv" id="record3">
    <ul class="disc">
        <li>上班时间 14:30</li>
        <li class="noneBold ">打卡时间 14:30</li>
        <li class="none">打卡地址</li>
    </ul>
</div>

<div class="recordDiv" id="record4">
    <ul class="disc">
        <li>下班时间 17:30</li>
        <li class="noneBold ">打卡时间 17:30</li>
        <li class="none">打卡地址</li>
    </ul>
</div>
</div>
<!-- 第二部分 -->
<style type="text/css">
    .disabled {
        pointer-events: none;
    }
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=noxDvacPFxnudsybXqwZKdr67SudUupK"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<div id="container" style="display:none;height:200px;width:100%;"></div>
<div style="display:block;display:none;font-size: 14px;padding: 3px 10px;">当前位置：<span id="address">定位中...</span></div>
<script type="text/javascript">
    updateRecordView();

    var currlng, currlat, kqlng, kqlat, kqfw, kqdd, curraddress;
    var map = new BMap.Map("container");    // 创建Map实例
    var point = new BMap.Point(113.404942, 22.520568);
    map.centerAndZoom(point, 15);  // 初始化地图,设置中心点坐标和地图级别
    //map.setCurrentCity("中山");          // 设置地图显示的城市
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    getCurrentPosition();//获取当前位置并显示在地图上
    // mobile_getCurrentPosition();
    //html5_getCurrentPosition();

    //移动建模定位
    function mobile_getCurrentPosition() {
        Mobile_NS.getCurrentPosition(function (result) {
            var status = result["status"];
            if (status == "1") {
                var lng = result["lng"];      /* 精度  -- 31.173211 */
                var lat = result["lat"];        /* 纬度  -- 121.475134 */
                var addr = result["addr"];  /* 中文地址  -- 湖北省武汉市江汉区 长青路288号 */
                curraddress = addr;
                var baiduPoint = new BMap.Point(lng, lat);
                initMap(baiduPoint);
                $("#address").text(addr);

                setCircleLocation(lng, lat);
            } else {
                var errMsg = result["errMsg"];
                Mobile_NS.Alert("errr:" + errMsg);
            }
        });
    }

    function html5_getCurrentPosition() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                //得到html5定位结果
                var x = position.coords.longitude;
                var y = position.coords.latitude;
                var point = new BMap.Point(x, y);
                BMap.Convertor.translate(point, 0, function (baidupoint) {
                    initMap(baidupoint);
                })
            });
        } else {
            Mobile_NS.Alert("定位失败");
        }

    }
    //百度地图浏览器定位
    function getCurrentPosition() {
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {

                var lng = point.lng;      /* 精度  -- 31.173211 */
                var lat = point.lat;        /* 纬度  -- 121.475134 */

                var geocoder = new BMap.Geocoder();
                geocoder.getLocation(r.point, function (result) {
                    if (result) {
                        console.info(result);
                        curraddress = result.address;
                        $("#address").text(curraddress);
                    }

                });
                initMap(r.point);
                setCircleLocation(lng, lat);
            }
            else {
                console.info('定位失败' + this.getStatus());
            }
        });
    }
    function initMap(point) {
        map.clearOverlays();
        map.centerAndZoom(point, 17);
        var centerMarker = new BMap.Marker(point);
        map.addOverlay(centerMarker);
        map.panTo(centerMarker);
        var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
        map.addControl(scaleControl);
        map.enableScrollWheelZoom();
    }

    //设置考勤点区域范围,并让地图缩放级别能显示当前位置和考勤区域在可视范围
    function setCircleLocation(lng, lat) {
        currlng = lng;
        currlat = lat;
        var scurrlng = currlng - 0.01;
        var ecurrlng = currlng + 0.01;
        var scurrlat = currlat - 0.01;
        var ecurrlat = currlat + 0.01;
        Mobile_NS.SQL("select jd,wd,kqfw,szdd,jdn from uf_kqdd where jd>{scurrlng} and jd<{ecurrlng} and wd>{scurrlat} and wd<{ecurrlat} order by (Square(jd-{currlng})+Square(wd-{currlat})) desc ;scurrlng="
            + scurrlng + ";ecurrlng=" + ecurrlng + ";scurrlat=" + scurrlat + ";ecurrlat=" + ecurrlat + ";currlng=" + currlng + ";currlat=" + currlat, function (result) {
                console.info(result);
                if (result.length > 0) {
                    for (var i = 0; i < result.length; i++) {
                        var kq_lng = result[i].jd;
                        var kq_lat = result[i].wd;
                        var kq_radius = result[i].kqfw;
                        kqdd = result[i].szdd;
                        var point = new BMap.Point(kq_lng, kq_lat);
                        var circle = new BMap.Circle(point, kq_radius, { strokeColor: "#FF33FF", strokeWeight: 3, strokeOpacity: 0.2, fillColor: "#1791fc", fillOpacity: 0.05 }); //创建圆
                        //画到地图上面
                        map.addOverlay(circle);
                        kqlng = kq_lng;
                        kqlat = kq_lat;
                        kqfw = kq_radius;
                    }
                }
            });
    }

    //提交按钮
    function dk() {
        if(currlng==undefined||currlng==null){
            Mobile_NS.Alert("定位尚未完成，请稍后", 2);
            return;
	    }
        if(kqlng==undefined||kqlng==null){
            Mobile_NS.Alert("不在考勤范围", 2);
            return;
	    }
        var centerpoint = new BMap.Point(kqlng, kqlat);
        var currpoint = new BMap.Point(currlng, currlat);
        var circle = new BMap.Circle(centerpoint, kqfw, { strokeColor: "#FF33FF" }); //创建圆
        if (BMapLib.GeoUtils.isPointInCircle(currpoint, circle)) {
            kqinsertDB();
            disableBtn();
        } else {
            Mobile_NS.Alert("不在考勤范围", 2);
        }
    }
    //插入考勤数据
    function kqinsertDB() {
        var now = new Date();
        var curruserid = Mobile_NS.getCurrUser();//获取当前用户
        var kqdjwd = currlng + "," + currlat;
        var currbanci=panduanbanci();
        if(currbanci==false){
            Mobile_NS.Alert("当前时间不能打卡时间内", 2);
            return;
        }
        Mobile_NS.SQL("insert into uf_kqxx (kqry,kqrq,kqsj,kqdd,kqdjwd,kqdkjd,kqdkwd,kqrdkdd,formmodeid,modedatacreater,modedatacreatertype,modedatacreatedate,modedatacreatetime,kqlx,pbsj,sbxb) values({curruserid},'{kqrq}','{kqsj}','{kqdd}','{kqdjwd}','{kqdkjd}','{kqdkwd}','{curraddress}',2,{curruserid},0,'{kqrq}','{modedatacreatetime}','0','{paibansj}','{sbxb}');" +
            "curruserid=" + curruserid + ";kqrq=" + getCurrentDate() + ";kqsj=" + getCurrentTime()
            + ";kqdd=" + kqdd + ";kqdjwd=" + kqdjwd + ";kqdkjd=" + currlng + ";kqdkwd=" + currlat + ";curraddress=" + curraddress + ";modedatacreatetime=" + getCurrentDateformat('hh:mm:ss')+";paibansj="+currbanci.time+";sbxb="+currbanci.sbxb, "", function (res4) {
                if (res4 == true) {
                    Mobile_NS.Alert("您已成功打卡");
                    updateRecordView();
                } else {
                    Mobile_NS.Alert("打卡失败");
                }
                //Mobile_NS.hideLoader();
            });
    }
    //更新记录显示div
    function updateRecordView() {
        var jsontime = [
			 { time: "08:30", start: "08:00", end: "09:00", sbxb: 0 },
			 { time: "12:00", start: "11:30", end: "12:30", sbxb: 1 },
			 { time: "14:00", start: "13:30", end: "14:30", sbxb: 0 },
			 { time: "18:00", start: "17:30", end: "18:30", sbxb: 1 }
		];
        var curruserid = Mobile_NS.getCurrUser();//获取当前用户
        var date = getCurrentDate();
        Mobile_NS.SQL("select concat(kqrq,' ',kqsj) as kqdt, kqsj,kqdd,pbsj,sbxb,kqlx from uf_kqxx where kqry={kqry} and kqrq='{kqrq}' order by id desc ;kqry=" + curruserid + ";kqrq=" + date, function (result) {
            alert(JSON.stringify(result) );
            var content = "";
            
		for (var index = 0; index < jsontime.length; index++) {
            var valueindex=jsontime[i];
            var pancitime='';
            console.info(valueindex.sbxb);
            if(valueindex.sbxb==0){
                pancitime="上班时间 "+valueindex.time
            }else{
                pancitime="下班时间 "+valueindex.time
            }
            content+='<div class="recordDiv"><ul class="disc"><li>'+pancitime+'</li>';
            if (result.length > 0) {
                banci(result[0].kqdt);//根据最近的打卡时间确定当前班次是否打卡来显示打卡按钮样式
                for (var i = 0; i < result.length; i++) {
                    var kqdatetime = result[i].kqdt;
                    var kqdd = result[i].kqdd;
                    var sbxb= result[i].sbxb;
                    var kqlx=result[i].kqlx;
                    var kqsj=result[i].kqsj;
                    var str2="";
                    var str3="打卡时间 "+kqsj;
                    if(kqlx=='0'){
                        str2='正常';
                    }else{
                        str2='外勤' ;
                    }
                    if(kqsj==valueindex.time){
                        content+='<li class="noneBold ">'+str3+'</li><li class="none"><span class="positionImage"></span><span>'+kqdd+'</span></li>' ;
                        break;
                    }
                }
            }
            content+='</ul></div>'; 
        };
            $("#record").html(content);
        });
    }

    //获取系统时间
    function getCurrentTime() {
        //格式化时间
        function p(s) {
            return s < 10 ? '0' + s : s;
        }
        var myDate = new Date();
        var h = myDate.getHours();
        var m = myDate.getMinutes();
        var s = myDate.getSeconds();
        return p(h) + ':' + p(m);
    }

    //获取系统时间
    function getCurrentDate() {
        //格式化时间
        function p(s) {
            return s < 10 ? '0' + s : s;
        }
        var myDate = new Date();
        var year = myDate.getFullYear();    //获取完整的年份(4位,1970-????)
        var month = myDate.getMonth() + 1;       //获取当前月份(0-11,0代表1月)
        var day = myDate.getDate();        //获取当前日(1-31)
        return year + '-' + p(month) + '-' + p(day);
    }

    function formatDate(date, formatStr) {
        var str = formatStr;
        var Week = ['日', '一', '二', '三', '四', '五', '六'];

        str = str.replace(/yyyy|YYYY/, date.getFullYear());
        str = str.replace(/yy|YY/, (date.getYear() % 100) > 9 ? (date.getYear() % 100).toString() : '0' + (date.getYear() % 100));

        str = str.replace(/MM/, date.getMonth() > 9 ? (date.getMonth() + 1).toString() : '0' + (date.getMonth() + 1));
        str = str.replace(/M/g, date.getMonth());

        str = str.replace(/w|W/g, Week[date.getDay()]);

        str = str.replace(/dd|DD/, date.getDate() > 9 ? date.getDate().toString() : '0' + date.getDate());
        str = str.replace(/d|D/g, date.getDate());

        str = str.replace(/hh|HH/, date.getHours() > 9 ? date.getHours().toString() : '0' + date.getHours());
        str = str.replace(/h|H/g, date.getHours());
        str = str.replace(/mm/, date.getMinutes() > 9 ? date.getMinutes().toString() : '0' + date.getMinutes());
        str = str.replace(/m/g, date.getMinutes());

        str = str.replace(/ss|SS/, date.getSeconds() > 9 ? date.getSeconds().toString() : '0' + date.getSeconds());
        str = str.replace(/s|S/g, date.getSeconds());

        return str;
    }
    function getCurrentDateformat(patten) {
        var now = new Date();
        return formatDate(now, patten);
    }
    function disableBtn() {
        $('#dk_button').removeAttr("style");
        $('#dk_button').addClass("disabled");
        var css = { "color": "#ffffff", "background-color": "#949ca6", "border": "#949ca6" };
        $("#dk_button").css(css);
        var dom='已打卡<br /><span class="timeSpan" id="showCurrTime">'+getCurrentTime()+'</span>';
        $('#dk_button').html(dom);
    }

//判断班次和上下班
	function panduanbanci() {
		var jsontime = [
			 { time: "08:30", start: "08:00", end: "09:00", sbxb: 0 },
			 { time: "12:00", start: "11:30", end: "12:30", sbxb: 1 },
			 { time: "14:00", start: "13:30", end: "14:30", sbxb: 0 },
			 { time: "18:00", start: "17:30", end: "18:30", sbxb: 1 }
		];
		var currjsontime;
		for (var index = 0; index < jsontime.length; index++) {
			var jsonindex= jsontime[index];
			var currdatetime = getCurrentDateformat('yyyy-MM-dd hh:mm');
			if (dateTimeStrCompare(currdatetime, getCurrentDate() + " " + jsonindex.start) == 1 && dateTimeStrCompare(currdatetime, getCurrentDate() + " " + jsonindex.end) == -1) {
				currjsontime=jsonindex;
				return currjsontime;
			}
		};
		if(currjsontime==undefined||currjsontime==null){
			return false;
		}
	}

    // 班次 type 1,2,3,4   打卡次序,dkdt 打卡时间  "yyyy-MM-dd hh:mm"
    function banci(dkdt) {
       var currjsontime=panduanbanci();
       if(currjsontime==false){//当前不在打卡时间范围内
            disableBtn();
       }else{
           //当前时间所在班次是否已打卡
        if (dateTimeStrCompare(dkdt, getCurrentDate() + " " + currjsontime.start) == 1 && dateTimeStrCompare(dkdt, getCurrentDate() + " " + currjsontime.end) == -1) {
            disableBtn();
			}
       }
    }
    function dateTimeStrCompare(dtstr1, dtstr2) { //"yyyy-MM-dd hh:mm"
        dtstr1 = dtstr1.replace("-", "/").replace("-", "/");//替换字符，变成标准格式
        var d1 = new Date(Date.parse(dtstr1));
        dtstr2 = dtstr2.replace("-", "/").replace("-", "/");//替换字符，变成标准格式
        var d2 = new Date(Date.parse(dtstr2));
        var n = 0;
        if (d1 > d2) {
            n = 1;
        } else if (d1 < d2) {
            n = -1;
        } else {
            n = 0;
        }
        return n;
    }
</script>
<!-- 第三部分 -->


<style type="text/css">
    .btn {
        width: 100px;
        height: 100px;
        text-align: center;
        font-size: 20px;
        color: #FFFFFF;
        /* line-height: 1.428571429; */
        border-radius: 50px;
        background-color: #0080FF;
        border: 1px solid #d5d5d5;
    }

    span.timeSpan {
        font-size: 15px;
    }
</style>
<script type="text/javascript">
    $(function () {
         $('#showCurrTime').html(getCurrentTime())
         
    });
</script>
<div style="text-align:center;">
    <button class="btn" id="dk_button" onclick="this.disabled=true; dk();">
        打卡<br />
        <span class="timeSpan" id="showCurrTime"></span>
    </button>
</div>